<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>cookie</title>
    <style type="text/css">
pre{
    font-family: "Monaco";
    font-size: 16px;
    line-height: 22px;
}

    </style>
</head>
<body>

<pre>
什么是cookie:
    页面用来保存信息
    比如：自动登录，记住用户名

cookie特性
    同一个网站中所有页面共享一套cookie
    数量、大小有限
    过期时间

js中使用cookie:
    document.cookie

设置cookie:
    格式：名字=值
    不会覆盖
    过期时间：expires=时间
    封装函数

读取cookie：
    字符串分割

删除cookie:
    已经过期

cookie的使用：
    例子：用cookie记录上次登录的用户名
    提交时--记录用户名
    window.onload--读取用户名
</pre>


<h2>记住上一次登陆过的用户名</h2>
<form id="form1" action="http://www.baidu.com">
    user: <input type="text" name="user"/><br>
    pass: <input type="password" name="pass"/>
    <input type="submit" value="login" >
</form>


<script>

window.onload = function(){

    // 1.用原生的方法设置cookie
    document.cookie = 'user=kathy';
    document.cookie = 'password=123';
    console.log(document.cookie);  //(多个等号不会覆盖，同名覆盖)user=kathy; password=123

    // 2.给cookie设置过期时间（ 如果不指定过期时间，浏览器关闭，清除cookie）
    var date = new Date();
    // 神奇的地方在于，如果传的参数超过了当月的天数，会自动把日期往后加
    date.setDate(date.getDate() + 14); //14天后过期
    console.log(date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate());
    document.cookie = 'age=22;expires='+date;
    var date = new Date();
    date.setDate(date.getDate() + 7); //7天后过期
    document.cookie = 'sex=female;expires='+date;

    // 3.封装函数setCookie
    setCookie('salary', '8888', 2);
    setCookie('address', 'china', 365);
    console.log(document.cookie);

    // 4.封装函数getCookie
    console.log(getCookie("user"));

    // 5.封装函数removeCookie
    removeCookie("user");
    console.log(document.cookie);

    // 6.记住上一次登陆过的用户名
    var form1 = document.getElementById("form1");
    var user = document.getElementsByName("user")[0];
    var pass = document.getElementsByName("pass")[0];
    form1.onsubmit = function(){
        setCookie("userName", user.value, 14);
    }
    user.value = getCookie("userName");
}


// 设置cookie: name=value;expires=日期
function setCookie(name, value, iDay){
    var date = new Date();
    date.setDate(date.getDate() + iDay);
    document.cookie = name + '=' + value + ';expires=' + date;
}



// user=kathy; password=123; age=22; sex=female; salary=8888; address=china
// 通过分号空格分开
function getCookie(name){
    var arr = document.cookie.split("; ");
    for(var i=0; i<arr.length; i++){
        if(arr[i].split("=")[0] == name){
            return arr[i].split("=")[1];
        }
    }
    return '';
}


// 通过设置过期时间来删除cookie
function removeCookie(name){
    setCookie(name, 1, -1);
}



</script>
</body>
</html>